<template>
  <el-dialog class="public-dialog" title="物流状态" width="600" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="p-[12px]">
      <div class="row">
        <div :class="`steps ${formData?.sku_track_node_status > idx ? 'atv' : ''}`" v-for="(item, idx) in steps1Opt">
          <div class="h-[18px]">{{ formData[item.preDate] ? "预计" + formData[item.preDate] : "" }}</div>
          <div>
            <img :src="imgPath(item.icon)" alt="" class="h-[34px] w-[34px] icon" />

            <div class="iborder" v-if="idx < 3"></div>
          </div>
          <div class="text-[var(--base-text-color)]">{{ item.title }}</div>
          <div>{{ formData[item.date] }}</div>
        </div>
      </div>
      <div class="h-[80px] flex items-center direction-reverse">
        <div class="link"></div>
      </div>
      <div class="row direction-reverse">
        <div class="steps" v-for="(item, idx) in steps2Opt">
          <div class="h-[18px]">{{ formData[item.preDate] ? "预计" + formData[item.preDate] : "" }}</div>
          <div>
            <img :src="imgPath(item.icon)" alt="" class="h-[34px] w-[34px] icon" />
            <div class="iborder" v-if="idx > 0"></div>
          </div>
          <div class="text-[var(--base-text-color)]">{{ item.title }}</div>
          <div>{{ formData[item.date] }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose(false)"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus"

import { tcLsSearch } from "./api"

const imgPath = (name) => {
  return new URL(`./img/${name}`, import.meta.url).href
}
const steps1Opt = [
  { title: "发货", icon: "1.png", date: "shipping_date", preDate: "pre_shipping_date" },
  { title: "开船", icon: "2.png", date: "sailing_date", preDate: "pre_sailing_date" },
  { title: "到港", icon: "2.png", date: "arrival_date", preDate: "pre_arrival_date" },
  { title: "清关（完成）", icon: "4.png", date: "customs_clearance_date", preDate: "pre_customs_clearance_date" },
]
const steps2Opt = [
  { title: "提取", icon: "5.png", date: "pickup_date", preDate: "pre_pickup_date" },
  { title: "签收", icon: "6.png", date: "signed_date", preDate: "pre_signed_date" },
  { title: "上架（第一次）", icon: "7.png", date: "first_listing_date", preDate: "pre_first_listing_date" },
  { title: "上架完成", icon: "8.png", date: "listing_completion_date", preDate: "pre_listing_completion_date" },
]

const modelValue = ref(false)
const formData = ref({})
const handleClose = () => {
  formData.value = {}
  modelValue.value = false
}

const open = (row = {}) => {
  modelValue.value = true
  let params = {
    //
    // tracking_number: ["BAZCA000030725"],
    // customer_order_no: ["BH24072417345336"], //order_no 2273877
    // sku: ["2638353"], //sku
    // fba_code: ["YYZ3"], // to_order_no

    // tracking_number: [row.tracking_number],
    customer_order_no: [row.customer_order_no],
    sku: [row.sku],
    // fba_code: [row.fba_code],
  }
  tcLsSearch(params).then((res) => {
    formData.value = res.data[0] || {}
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.direction-reverse {
  flex-direction: row-reverse;
}
.row {
  display: flex;
  justify-content: space-between;

  * {
    font-size: 12px;
    color: var(--base-sub-text-color);
  }
  .iborder {
    width: 80px;
    height: 0;
    border-bottom: 2px dashed var(--base-border-color);
    position: relative;
    top: -26px;
    left: 80px;
  }
}
.steps {
  height: 100px;
  width: 100px;
  text-align: center;
  .icon {
    background: var(--base-small-color);
    margin: auto;
    margin-top: 4px;
    margin-bottom: 10px;
    border-radius: 50px;
  }
  &.atv {
    .icon {
      background: var(--base-primary-dark-bg);
    }
  }
}
.link {
  width: 1px;
  height: 40px;
  border-left: 2px dashed var(--base-border-color);
  margin-right: 50px;
}
</style>
